/*
 * @Author: 别拿暗恋当饭吃. 13466071+lililkli@user.noreply.gitee.com
 * @Date: 2024-06-23 20:23:05
 * @LastEditors: 别拿暗恋当饭吃. 13466071+lililkli@user.noreply.gitee.com
 * @LastEditTime: 2024-06-24 10:46:47
 * @FilePath: \rabce\project\src\pages\MyarchiesInput\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { RefObject, useState } from 'react'

import type { FC } from 'react'
import { useNavigate } from 'react-router-dom';
import { ImageUploader, Space, Toast, Dialog, ImageUploadItem } from 'antd-mobile'
import { NavBar, } from 'antd-mobile'
import {
    Form,
    Input,
    Button,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Switch,
} from 'antd-mobile'
import dayjs from 'dayjs'
import { SearchOutline, MoreOutline, CloseOutline } from 'antd-mobile-icons'
import type { DatePickerRef } from 'antd-mobile/es/components/date-picker'
const index = () => {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    const onFinish = (values: any) => {
        Dialog.alert({
            content: <pre>{JSON.stringify(values, null, 2)}</pre>,
        })
    }


    return (
        <div>
            <header>
                <NavBar onBack={back}>我的档案</NavBar>
            </header>
            <main>
                <Form.Item name='name' label='[主要症状]'>
                    <Input placeholder='输入您的主要症状' />
                </Form.Item>
                <Form.Item name='address' label='[详细症状]'>
                    <Input placeholder='请详细输入您当前的症状' />
                </Form.Item>
                <Form.Item name='name' label='[既往病史]'>
                    <Input placeholder='输入您的既往病史' />
                </Form.Item>
                <Form.Item name='address' label='[最后一次治疗相关经历]'>
                    <Input placeholder='请详医院名称' />
                </Form.Item>
                <Form.Item
                    name='birthday'
                    trigger='onConfirm'
                    onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                        datePickerRef.current?.open()
                    }}
                >
                    <DatePicker>
                        {value =>
                            value ? dayjs(value).format('YYYY-MM-DD') : '请选择最近一次治疗时间'
                        }
                    </DatePicker>
                </Form.Item>
                <Form.Item
                    name='birthday'
                    trigger='onConfirm'
                    onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                        datePickerRef.current?.open()
                    }}
                >
                    <DatePicker>
                        {value =>
                            value ? dayjs(value).format('YYYY-MM-DD') : '请选择治疗结束时间'
                        }
                    </DatePicker>
                </Form.Item>
                <Form.Item
                    rules={[{ message: '内容不能为空' }]}
                >
                    <Input onChange={console.log} placeholder='输入治疗过程' />
                </Form.Item>
                <Form.Item
                    name='name'
                    rules={[{ message: '内容不能为空' }]}
                    label='[相关图片]'
                >
                    <p>最多可添加6张图片，长按图片排序</p>
                    <ImageUploader upload={function (file: File): Promise<ImageUploadItem> {
                        throw new Error('Function not implemented.');
                    }}
                    />
                    &emsp;&emsp;&emsp;&emsp;&emsp;
                    <Button  fill='solid' style={{width:"5.88rem",height:'2.56rem'}}>
                        删除
                    </Button>
                    &emsp;&emsp;&emsp;&emsp;&emsp;
                    <Button color='primary' fill='solid' style={{width:"5.88rem",height:'2.56rem'}}>
                        编辑
                    </Button>
                </Form.Item>
            </main>
        </div>
    )
};


export default index;